<template>
  <div>
    <el-button type="primary" @click="changeColor">点我变成粉色</el-button>
    <el-button type="primary" @click="originColor"
      >点我变成原来的颜色</el-button
    >
    <el-button type="primary" @click="randomColor">点我变成随机色</el-button>

    <p :style="{ color: randomColors }">我会变颜色</p>
  </div>
</template>


<script>
export default {
  name: "Three",
  components: {},
  data() {
    return {
      randomColors: "",
    };
  },
  methods: {
    changeColor() {
      this.randomColors = "pink";
    },
    originColor() {
      this.randomColors = "black";
    },
    randomColor() {
      let a = parseInt(Math.random() * 100);
      let b = parseInt(Math.random() * 100);
      let c = parseInt(Math.random() * 100);
      console.log(a);
      this.randomColors = `#${a}${b}${c}`;
    },
  },
};
</script>


<style scoped>
.pink {
  color: pink;
}
</style>